<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>Cascade Framework</title>
        <meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
        <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">

        </style>
    </head>
    <body class="narrow">
        <div class="site-center">
            <div class="site-body">
                <div class="site-header">
                    <div class="tags sitemenutags">
                        <div class="cell">
                            <ul class="nav blocks">
                                <li><a href="https://github.com/jslegers/cascadeframework/archive/master.zip">Download v1.5</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col width-fill sitemenu">
                        <div class="col width-fit mobile-width-fit">
                            <div class="cell">
                                <a href="index.html" class="logo"></a>
                            </div>
                        </div>
                        <div class="col width-fill mobile-width-fill">
                            <div class="cell">
                                <ul class="nav">
                                    <li><a href="grid.html">Grid</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icons.html">Icons</a></li>
                                    <li class="active"><a href="components.html">Components</a></li>
                                    <li><a href="templates.html">Templates</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="sitemenu-responsive col collapsible collapsed">
                        <div class="col collapse-trigger">
                            <div class="cell">
                                <ul class="nav ">
                                    <li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col">
                            <div class="left collapse-section">
                                <div class="cell">
                                    <ul class="nav">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="grid.html">Grid</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="components.html">Components</a></li>
                                        <li><a href="templates.html">Templates</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="cell">
                        <div class="col">
                            <div class="cell">
                                <div class="page-header">
                                    <h1>Components <small>documentation</small></h1>
                                </div>
                            </div>
                        </div>
                        <div class="col width-1of4">
                            <div class="cell menu">
                                <span class="tiny">Component types</span>
                                <ul class="left nav links">
                                    <li><a href="components.html">Panels</a></li>
                                    <li><a href="components-tabblocks.html">Tab blocks</a></li>
                                    <li><a href="components-tables.html">Tables</a></li>
                                    <li class="active"><a href="components-navigation.html">Navigation</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col width-fill">










                            <div class="col">
                                <div class="cell">
                                    <h2>Basic navigation</h2>
                                    <p>By adding the "nav" class to your unordened list, you have a basic navigation element with normalised layout that can be customised
                                        according to your needs.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <ul class="nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>








                            <div class="col">
                                <div class="cell">
                                    <h2>Navigation orientation</h2>
                                    <p>By adding a "right", "left" or "bottom" class to your navigation element, you can change its orientation.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <ul class="nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    <ul class="bottom nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col width-1of2">
                                                <div class="cell">
                                                    <ul class="left nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col width-fill">
                                                <div class="cell">
                                                    <ul class="right nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>












                            <div class="col">
                                <div class="cell">
                                    <h2>Menu</h2>
                                    <p>By adding a "menu" class to the navigation element's wrapper, you get a basic menu.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="menu cell">
                                                    <ul class="nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="menu cell">
                                                    <ul class="bottom nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col width-1of2">
                                                <div class="menu cell">
                                                    <ul class="left nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col width-fill">
                                                <div class="menu cell">
                                                    <ul class="right nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>











                            <div class="col">
                                <div class="cell">
                                    <h2>Links menu</h2>
                                    <p>By adding a "links" class to the navigation element, your menu becomes a menu of ordinary links. This same technique
                                        can be used to override the default styling for menus or other navigation elements with your custom code.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="menu cell">
                                                    <ul class="links nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="menu cell">
                                                    <ul class="bottom links nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col width-1of2">
                                                <div class="menu cell">
                                                    <ul class="left links nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col width-fill">
                                                <div class="menu cell">
                                                    <ul class="right links nav">
                                                        <li><a href="#">Normal item</a></li>
                                                        <li class="active"><a href="#">Active item</a></li>
                                                        <li class="disabled">Disabled item</li>
                                                        <li><a href="#">Another normal item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>










                            <div class="col">
                                <div class="cell">
                                    <h2>Menu stats</h2>
                                    <p>By adding a "stats" class to the navigation element, you get a special menu type that can be used eg. for displaying stats.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell menu">
                                                    <ul class="stat left nav">
                                                        <li><a href="#"><span class="data">1,234</span>donuts</a></li>
                                                        <li><a href="#"><span class="data">567</span>kayaks</a></li>
                                                        <li><a href="#"><span class="data">23,456</span>kittens</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="col">
                                <div class="cell">
                                    <h2>Tree nav</h2>
                                    <p>Cascade framework supports a tree navigation as well. Using the JS features of the framework, it also supports
                                        collapsing.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <ul class="nav tree">
                                                        <li class="collapsible"><a class="collapse-trigger" href="documents">My Documents</a>
                                                            <ul class="collapse-section">
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Christines_Files/">Christine's Files</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Resume.doc</a></li>
                                                                        <li class=""><a href="#" class="">Cover-letter.doc</a></li>

                                                                        <li class=""><a href="#" class="">Gift Registry.doc</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Nathans_Stuff/">Nathan's Stuff</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Birthday Parties.doc</a></li>
                                                                        <li class=""><a href="#" class="">Area Playgrounds.doc</a></li>

                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Travel_Ideas/">Travel Ideas</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Potential Places.doc</a></li>
                                                                        <li class=""><a href="#" class="">Travel Funds.doc</a></li>
                                                                    </ul>

                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">Wedding Plan</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Guests.doc</a></li>
                                                                        <li class=""><a href="#" class="">Services.doc</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                    <ul class="collapse-section">
                                                                        <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                            <ul class="collapse-section">
                                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                                    <ul class="collapse-section">
                                                                                        <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="col">
                                <div class="cell">
                                    <h2>Folder tree</h2>
                                    <p>The tree navigation can be used to implement OS style folder trees.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell files">
                                                    <ul class="nav tree">
                                                        <li class="collapsible"><a class="collapse-trigger" href="documents">My Documents</a>
                                                            <ul class="collapse-section">
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Christines_Files/">Christine's Files</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Resume.doc</a></li>
                                                                        <li class=""><a href="#" class="">Cover-letter.doc</a></li>

                                                                        <li class=""><a href="#" class="">Gift Registry.doc</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Nathans_Stuff/">Nathan's Stuff</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Birthday Parties.doc</a></li>
                                                                        <li class=""><a href="#" class="">Area Playgrounds.doc</a></li>

                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Travel_Ideas/">Travel Ideas</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Potential Places.doc</a></li>
                                                                        <li class=""><a href="#" class="">Travel Funds.doc</a></li>
                                                                    </ul>

                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">Wedding Plan</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Guests.doc</a></li>
                                                                        <li class=""><a href="#" class="">Services.doc</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                    <ul class="collapse-section">
                                                                        <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                            <ul class="collapse-section">
                                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                                    <ul class="collapse-section">
                                                                                        <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Menu tree</h2>
                                    <p>A menu tree combines menu navigation with tree navigation.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell menu">
                                                    <ul class="nav tree">
                                                        <li class="collapsible"><a class="collapse-trigger" href="documents"><span class="icon icon-collapse"></span>My Documents</a>
                                                            <ul class="collapse-section">
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Christines_Files/"><span class="icon icon-collapse"></span>Christine's Files</a>
                                                                    <ul class="collapse-section">
                                                                        <li><a href="#">Resume.doc</a></li>
                                                                        <li><a href="#">Cover-letter.doc</a></li>

                                                                        <li><a href="#">Gift Registry.doc</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Nathans_Stuff/"><span class="icon icon-collapse"></span>Nathan's Stuff</a>
                                                                    <ul class="collapse-section">
                                                                        <li><a href="#">Birthday Parties.doc</a></li>
                                                                        <li><a href="#">Area Playgrounds.doc</a></li>

                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Travel_Ideas/"><span class="icon icon-collapse"></span>Travel Ideas</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Potential Places.doc</a></li>
                                                                        <li class=""><a href="#" class="">Travel Funds.doc</a></li>
                                                                    </ul>

                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>Wedding Plan</a>
                                                                    <ul class="collapse-section">
                                                                        <li class=""><a href="#" class="">Guests.doc</a></li>
                                                                        <li class=""><a href="#" class="">Services.doc</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
                                                                    <ul class="collapse-section">
                                                                        <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
                                                                            <ul class="collapse-section">
                                                                                <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
                                                                                    <ul class="collapse-section">
                                                                                        <li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> 










                            <div class="col">
                                <div class="cell">
                                    <h2>Tabs</h2>
                                    <p>By adding a "tabs" class to the navigation element's wrapper, you get a basic tab navigation element.
                                        Notice that this element has a default width of 100% and thus the "tabs" class shouldn't be used on markup that
                                        has a margin.<br />
                                        If you use Cascade Framework's JS, well-defined tabs are automaticly enabled.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <div class="tabs">
                                                        <ul class="nav">
                                                            <li><a href="#">Normal item</a></li>
                                                            <li class="active"><a href="#">Active item</a></li>
                                                            <li class="disabled">Disabled item</li>
                                                            <li><a href="#">Another normal item</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    <div class="tabs">
                                                        <ul class="bottom nav">
                                                            <li><a href="#">Normal item</a></li>
                                                            <li class="active"><a href="#">Active item</a></li>
                                                            <li class="disabled">Disabled item</li>
                                                            <li><a href="#">Another normal item</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col width-1of2">
                                                <div class="cell">
                                                    <div class="tabs">
                                                        <ul class="left nav">
                                                            <li><a href="#">Normal item</a></li>
                                                            <li class="active"><a href="#">Active item</a></li>
                                                            <li class="disabled">Disabled item</li>
                                                            <li><a href="#">Another normal item</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col width-fill">
                                                <div class="cell">
                                                    <div class="tabs">
                                                        <ul class="right nav">
                                                            <li><a href="#">Normal item</a></li>
                                                            <li class="active"><a href="#">Active item</a></li>
                                                            <li class="disabled">Disabled item</li>
                                                            <li><a href="#">Another normal item</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Gallery</h2>
                                    <p>By adding a "gallery" class to the navigation element's wrapper, you get a basic gallery element.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="gallery cell">
                                                    <ul class="nav">
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                        <li><img src="assets/img/100x100.gif"></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Tags</h2>
                                    <p>By adding a "tags" class to the navigation element's wrapper, you get a basic tag navigation element. It has a basic normalised
                                        markup.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell tags">
                                                    <ul class="nav">
                                                        <li class="disabled">Lorem ipsum</li>
                                                        <li class="active"><a href="#">Dolor sit amet</a></li>
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Proin </a></li>
                                                        <li><a href="#">Sagittis libero</a></li>
                                                        <li><a href="#">Aliquet augue</a></li>
                                                        <li><a href="#">Quisque dui lacus</a></li>
                                                        <li><a href="#">Consequat</a></li>
                                                        <li><a href="#">Dictum non</a></li>
                                                        <li><a href="#">Venenatis et tortor</a></li>
                                                        <li><a href="#">Suspendisse mauris</a></li>
                                                        <li><a href="#">In accumsan </a></li>
                                                        <li><a href="#">Egestas neque</a></li>
                                                        <li><a href="#">Mauris eget felis</a></li>
                                                        <li><a href="#">Suspendisse</a></li>
                                                        <li><a href="#">condimentum eleifend nulla</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="col">
                                <div class="cell">
                                    <h2>Cloud tags</h2>
                                    <p>By adding a "cloud" class to the navigation element, your tag navigation elements become cloud tags. Five different sizes
                                        are supported out of the box.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell tags">
                                                    <ul class="cloud nav">
                                                        <li class="tag1 disabled">Lorem ipsum</li>
                                                        <li class="tag2 active"><a href="#">Dolor sit amet</a></li>
                                                        <li class="tag3"><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li class="tag2"><a href="#">Proin </a></li>
                                                        <li class="tag4"><a href="#">Sagittis libero</a></li>
                                                        <li class="tag1"><a href="#">Aliquet augue</a></li>
                                                        <li class="tag1"><a href="#">Quisque dui lacus</a></li>
                                                        <li class="tag5"><a href="#">Consequat</a></li>
                                                        <li class="tag2"><a href="#">Dictum non</a></li>
                                                        <li class="tag1"><a href="#">Venenatis et tortor</a></li>
                                                        <li class="tag3"><a href="#">Suspendisse mauris</a></li>
                                                        <li class="tag4"><a href="#">In accumsan </a></li>
                                                        <li class="tag1"><a href="#">Egestas neque</a></li>
                                                        <li class="tag5"><a href="#">Mauris eget felis</a></li>
                                                        <li class="tag1"><a href="#">Suspendisse</a></li>
                                                        <li class="tag2"><a href="#">condimentum eleifend nulla</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="col">
                                <div class="cell">
                                    <h2>Block tags</h2>
                                    <p>By adding a "blocks" class to the navigation element, your tag navigation elements become button-like tags.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell tags">
                                                    <ul class="nav blocks">
                                                        <li class="disabled">Lorem ipsum</li>
                                                        <li class="active"><a href="#">Dolor sit amet</a></li>
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Proin </a></li>
                                                        <li><a href="#">Sagittis libero</a></li>
                                                        <li><a href="#">Aliquet augue</a></li>
                                                        <li><a href="#">Quisque dui lacus</a></li>
                                                        <li><a href="#">Consequat</a></li>
                                                        <li><a href="#">Dictum non</a></li>
                                                        <li><a href="#">Venenatis et tortor</a></li>
                                                        <li><a href="#">Suspendisse mauris</a></li>
                                                        <li><a href="#">In accumsan </a></li>
                                                        <li><a href="#">Egestas neque</a></li>
                                                        <li><a href="#">Mauris eget felis</a></li>
                                                        <li><a href="#">Suspendisse</a></li>
                                                        <li><a href="#">condimentum eleifend nulla</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>











                            <div class="col">
                                <div class="cell">
                                    <h2>Pipes</h2>
                                    <p>By adding a "pipes" class to the navigation element's wrapper, you get a basic pipes navigation element. The pipes
                                        element can contain regular text items along with nav items.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <div class="pipes">
                                                        <ul class="nav">
                                                            <li><a href="#">Normal item</a></li>
                                                            <li class="active"><a href="#">Active item</a></li>
                                                            <li class="disabled">Disabled item</li>
                                                            <li>Normal text</li>
                                                            <li>Some text with a <a href="#">link</a> embedded</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Pipe stats</h2>
                                    <p>The "pipes" nativation element can also be used as an equivalent to the menu stats.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell pipes">
                                                    <ul class="stat nav">
                                                        <li><a href="#">1,234 <span class="data">donuts</span></a></li>
                                                        <li><a href="#">567 <span class="data">kayaks</span></a></li>
                                                        <li><a href="#">23,456 <span class="data">kittens</span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Pagination</h2>
                                    <p>The "pagination" nativation element can be used for simple pagination.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell pagination">
                                                    <ul class="nav">
                                                        <li><a href="#">Prev</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">Next</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>













                        </div>
                    </div>
                </div>
            </div>
            <div class="site-footer">
                <div class="cell">
                    <div id="sociallogos">
                        <a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
                        <a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
                        <a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
                        <div class="col">
                            &#169; 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
                        </div>
                    </div>
                    <a href="http://www.cascade-framework.com/" class="powered-by"></a>
                </div>
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>
